<style scoped lang='less'>
    .holiday-list-mian {
        .action-cell {
            margin-bottom: 20px;
        }

        .home-list .search-block {
            display: flex;
            margin-bottom: 10px;
        }

        .input-search {
            margin-right: 10px;
            margin-bottom: 10px;
        }

        .home-list .selected-search {
            height: 200px;
            width: 100%;
            position: relative;
            border-radius: 4px;
            margin-bottom: 10px;

        }

        .home-list .selected-search .search-action {
            position: absolute;
            top: 10px;
            left: 10px;
            right: 10px;
        }

        .home-list .selected-search .selected-arr {
            position: absolute;
            top: 50px;
            left: 20px;
            right: 20px;
            bottom: 10px;
            overflow: scroll;
        }

        .home-list .select-click {
            border: 1px solid #dddee1;
            border-radius: 4px;
            padding: 10px;
            font-weight: 500;
            text-align: center;
            width: 260px;
            margin-bottom: 10px;
        }

        .home-list .selected-search .selected-arr .selected-item {
            /*border-bottom: 1px solid #dfdfdf;*/
            margin-bottom: 10px;
            font-size: 15px;
        }
    }

</style>
<template>
    <div class="holiday-list-mian">
        <Table :context="self" :data="tableData" :columns="tableColumns" stripe border></Table>
        <!--审核操作-->
        <Modal v-model="setCheckIsShow" title="审核" @on-ok="handleSubmit('formValidate')"
               @on-cancel="setPwdIsShow =false">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
                <Form-item label="绑定车辆" prop="isNeedOtherChecker">
                    <i-select v-model="formValidate.carId" placeholder="请选择绑定车辆">
                        <template v-for="(item,index) in mgrCar">
                            <i-option :value="item.Id">{{item.Platenum}}</i-option>
                        </template>
                    </i-select>
                </Form-item>
            </Form>
        </Modal>
    </div>
</template>
<script>

    import apiUtil from '../../assets/utils/api_util';
    import {Modal} from 'view-design';

    export default {
        data() {
            return {
                //审核
                setCheckIsShow: false,
                formValidate: {
                    carId:'',
                },
                ruleValidate: {},
                mgrCar: [],
                checkRow: '',
                //表格数据
                self: this,
                tableData: [],
                total: 0,
                current: 1,
                tableColumns: [
                    {
                        title: '申请人',
                        key: 'Peoplename',
                        align: 'center',
                    },
                    {
                        title: '申请人电话',
                        key: 'Peoplephone',
                        align: 'center',
                    },
                    {
                        title: '申请人单位',
                        key: 'Unitname',
                        align: 'center',
                    },
                    {
                        title: '申请人部门',
                        key: 'Orgname',
                        align: 'center',
                    },
                    {
                        title: '预计里程数',
                        key: 'Miles',
                        align: 'center',
                    },
                    {
                        title: '用车原因',
                        key: 'Reason',
                        align: 'center',
                    },
                    {
                        title: '用车类型',
                        key: 'Title',
                        align: 'center',
                    },
                    {
                        title: '开始日期',
                        key: 'Usedstartdate',
                        align: 'center',
                    },
                    {
                        title: '返回日期',
                        key: 'Usedenddate',
                        align: 'center',
                    },
                    {
                        title: '审核状态',
                        key: 'State',
                        align: 'center',
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        // background: '#e4e4e4',
                                        // border: '1px solid #d5d5d5'
                                    },
                                    on: {
                                        click: () => {
                                            this.showCheckModal(params.row.Id);
                                        }
                                    }
                                }, '派车')
                            ])
                        }
                    }

                ]
            }
        },
        mounted() {
            let that = this;
            this.mockTableData();
            this.getCompentensData();
        },
        components: {},
        watch: {},
        component: {
            Modal
        },
        methods: {
            //跳转
            jumpPage: function (id, url) {
                //跳转
                let route = '';
                if (id.length > 0) {
                    route = {
                        path: url,
                        query: {
                            id: id
                        },
                    };
                } else {
                    route = {
                        path: url,
                    };
                }

                this.$router.push(route);
            },

            mockTableData() {
                let that = this;

                let para = {};
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.CarUseRequestList, para, function (res) {
                    that.$Loading.finish();
                    that.tableData = res.Msg;
                });
            },


            /**
             * 审核
             */


            //获取用车列表
            getCompentensData: function () {
                let that = this;
                let params = {};
                apiUtil.get(that, apiUtil.urls.MgrCars, params, function (res) {
                    that.mgrCar = res.Msg.Arrays;
                });
            },
            showCheckModal: function (row) {
                this.setCheckIsShow = true;
                this.checkRow = row;
                console.log('checkRow:',row)
            },
            handleSubmit(name) {
                let that = this;
                let model = this.$refs[name].model;
                this.$refs[name].validate((valid) => {
                    that.comfirmModifyPS(model);
                })
            },
            comfirmModifyPS: function (model) {
                let that = this;
                model.requestId = this.checkRow;
                let params = that.$qs.stringify(model);
                apiUtil.post(that, apiUtil.urls.BingCarToRequest, params, function (res) {
                    that.$Notice.open({
                        title: '提示',
                        desc: '绑定成功 '
                    });
                   that.mockTableData();
                });
            },
        },
    }
</script>
